<template>
  <div>
    <swiper loop auto
            :list="urlList"
            :index="bannerIndex"
            @on-index-change="bannerIndexChange"
            style="width:100%;margin:0 auto;"
            :aspect-ratio="234/750">
    </swiper>
  </div>
</template>

<script>
import { Swiper } from 'vux'
// 首页轮播图
const baseList = [
  {
    url: 'http://dwz.cn/7fdjhA',
    img: '/front/static/images/750-2-234.jpg',
    title: '系统使用说明'
  },
  {
    url: 'http://dwz.cn/7fdjhA',
    img: '/front/static/images/750-3-234.jpg',
    title: '常见问题解答'
  }
  // ,
  // {
  //   url: 'javascript:',
  //   img: '/front/static/images/750-5-234.jpg',
  //   title: '关于获取优惠'
  // }
]

const urlList = baseList.map((item, index) => ({
  url: item.url,
  img: item.img,
  fallbackImg: item.fallbackImg,
  title: `${item.title}`
}))

export default {
  components: {
    Swiper
  },
  data () {
    return {
      urlList: urlList,
      bannerIndex: 0,
      msg: 'Hello World!'
    }
  },
  computed: {},
  methods: {
    bannerIndexChange: function (index) {
      this.bannerIndex = index
    }
  }
}
</script>

<style>
</style>
